<template>
	<view class="address-form" :style="[{paddingTop:statusBar+ 'px'}]">
		<view class="status" :style="[{height:statusBar+ 'px'}]"></view>
		<view class="navigation" :style="[{top:statusBar+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">地址管理</view>
		</view>
		<view class="navigation-position"></view>
		<view class="content">
			<uni-forms class="form" ref="form" :value="form" :rules="rules" validate-trigger="bind"
				err-show-type="undertext">
				<view class="form-border">
					<view class="form-label">
					<uni-forms-item name="contact_name" required label="收件姓名">
						<uni-easyinput type="text" :inputBorder="false" v-model="form.contact_name" placeholder="请输入收件姓名">
						</uni-easyinput>
					</uni-forms-item>
					</view>
				</view>
				<view class="form-border">
					<view class="form-label">
						<uni-forms-item name="contact_phone" label="收件电话">
							<uni-easyinput type="text" :inputBorder="false" v-model="form.contact_phone" placeholder="请输入收件电话">
							</uni-easyinput>
						</uni-forms-item>
					</view>
				</view>
				<view class="form-border">
					<view class="form-label">
						<uni-forms-item label="所在地区" name="district">
							<view class="choiceCity">
								<AddressPicker class="addressPicker" @change="change" :level="3"
									:class="[planLocate=='请选择所在地区'?'gray-color':'black-color']">{{planLocate}} </AddressPicker>
							</view>
						</uni-forms-item>
					</view>
				</view>
				<view class="form-border">
					<view class="form-label">
						<uni-forms-item name="address" label="详细地址">
							<uni-easyinput type="text" :inputBorder="false" v-model="form.address" placeholder="请输入详细收件地址">
							</uni-easyinput>
						</uni-forms-item>
					</view>
				</view>
				<!-- <view class="divider">购买香港及海外直邮商品时需要上传身份证信息</view>
				<uni-forms-item name="id_code" label="证件号码">
					<uni-easyinput type="text" :inputBorder="true" v-model="form.id_code" placeholder="选填 证件号码(仅限海外直邮)">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="id_name" label="证件姓名">
					<uni-easyinput type="text" :inputBorder="true" v-model="form.id_name" placeholder="选填 证件姓名(仅限海外直邮)">
					</uni-easyinput>
				</uni-forms-item> -->
				<view class="form-border">
					<view class="form-label">
						<uni-forms-item label="默认地址" name="is_default">
							<view class="switch">
								<switch :checked="form.is_default" v-model="form.is_default"
									@change="binddata('is_default', $event.detail.value)" class="switch-btn" color="#E97254"></switch>
							</view>
						</uni-forms-item>
					</view>
				</view>
			</uni-forms>
			<button class="submit" @click="submit">保存</button>
		</view>
	</view>
</template>

<script>
	import _ from 'lodash'
	import store from "store"
	import {
		getAddress,
		createAddress,
		updateAddress
	} from "api/addressApi";
	import { mapGetters } from 'vuex'
	// import AuthChecking from "mixins/AuthChecking";
	import AddressPicker from "components/lingdang-AddressPicker/AddressPicker.vue"

	export default {
		name: "addressform",
		store,
		// mixins: [AuthChecking],
		components: {
			AddressPicker
		},
		computed: {
		  ...mapGetters([
				'statusBar'
		  ])
		},
		data: () => ({
			editAddress: null,
			area: '请选择所在地区',
			form: {
				id_code: '',
				contact_name: '',
				contact_phone: '',
				province: '',
				city: '',
				district: '',
				address: '',
				is_default: true
			},
			formArry:[],
			planLocate: '请选择所在地区',
			province: '',
			city: '',
			district: '',
			rules: {
				id_code: {
					rules: [{
						required: false,
						errorMessage: '请输入海外直邮证件号码'
					}]
				},
				id_name: {
					rules: [{
						required: false,
						errorMessage: '请输入海外直邮证件姓名'
					}]
				},
				contact_name: {
					rules: [{
						required: true,
						errorMessage: '请输入收件姓名'
					}]
				},
				contact_phone: {
					rules: [{
							required: true,
							errorMessage: '请输入收件电话'
						},
						{
							pattern: "^[0-9]{11}$",
							errorMessage: '请输入11位手机号码'
						},
						{
							format: 'number',
							errorMessage: '手机号码格式错误'
						}
					]
				},
				// district: {
				// 	rules: [{
				// 		required: true,
				// 		errorMessage: '请选择所在地区'
				// 	}]
				// },
				address: {
					rules: [{
						required: true,
						errorMessage: '请输入详细收件地址'
					}]
				}
			},
			formdata:null
		}),
		methods: {
			back(){
				uni.navigateBack()
			},
			async loadAddress(id) {
				const address = await getAddress(id)
				this.editAddress = address
				this.form.contact_name = address.contact_name
				this.form.contact_phone = address.contact_phone
				this.form.province = address.province_code
				this.form.city = address.city_code
				this.form.district = address.district_code
				this.form.address = address.address
				this.form.is_default = address.is_default
				this.area = address.province + ' ' + address.city + ' ' + address.district
				this.planLocate = this.area
			},
			bindPickerChange(e) {
				const code = e.target.code
				const name = e.target.value
				this.form.province = code[0]
				this.form.city = code[1]
				this.form.district = code[2]
				this.area = _.join(name, ' ')
			},
			async createNewAddress() {
				let formnew = {
					data:this.form
				}
				console.log(this.form)
				await createAddress(this.form)
				uni.showToast({
					title: '地址添加成功',
					duration: 2000,
					icon: 'success'
				})
				uni.navigateBack({})
				// uni.navigateTo({url: `/packs/pages/address/index`})
			},
			async editOldAddress() {
				let formnew = {
					data:this.form
				}
				await updateAddress(this.editAddress.id, this.form)
				uni.showToast({
					title: '地址修改成功',
					duration: 2000,
					icon: 'success'
				})
				uni.navigateBack({})
				// uni.navigateTo({url: `/packs/pages/address/index`})
			},
			submit() {
				this.$refs.form.validate().then(res => {
					this.form.contact_name = res.contact_name
					this.form.contact_phone = res.contact_phone
					this.form.is_default = res.is_default
					let formdata = new FormData()
					// console.log(formdata)
 					let contact_name = {
						contact_name:this.form.contact_name
					}
					this.formArry["contact_name"]= this.form.contact_name
					formdata.append(contact_phone,this.form.contact_name)
					let contact_phone = {
						contact_phone:this.form.contact_phone
					}
					this.formArry["contact_phone"] = this.form.contact_phone
					formdata.append(contact_phone,this.form.contact_phone)
					let province = {
						province:this.form.province
					}
					formdata.append(province,this.form.province)
					this.formArry["province"] = this.form.province
					let city = {
						city:this.form.city
					}
					this.formArry["city"] = this.form.city
					formdata.append(city,this.form.city)
					let district = {
						district:this.form.district
					}
					this.formArry["district"] = this.form.district
					formdata.append(district,this.form.district)
					let address = {
						address:this.form.address
					}
					this.formArry["address"] = this.form.address
					formdata.append(address,this.form.address)
					let is_default = {
						is_default:this.form.is_default
					}
					this.formArry["is_default"] = this.form.is_default
					formdata.append(is_default,this.form.is_default)
					
					// this.formdata = formdata
					
					if (this.editAddress) {
						this.editOldAddress()
					} else {
						this.createNewAddress()
					}
				})
			},
			change(result) {
				this.planLocate = '';
				this.form.province = result.data[0].id;
				this.form.city = result.data[1].id;
				// console.log(result.data[2])
				if(result.data[2]){
					this.form.district = result.data[2].id;
				}else{
					this.form.district = result.data[1].id;
				}
				result.data.forEach((item, index) => {
					if (index === 0) {
						this.planLocate += item.name
					} else {
						this.planLocate += '-' + item.name
					}
				});
				this.area = this.planLocate;
				// let arr =this.planLocate.split('-'); 

			}
		},
		onLoad(options) {
			
			// let obj = { 'data[contact_name]': 'lv1', 'data[contact_phone]': 13300001000, 'data[province]': 110000, 'data[city]': 110100, 'data[district]': 110101, 'data[address]': 12345, 'data[id_code]': , 'data[id_name]': , 'data[is_default]': 0}
			// let aa = 'data[contact_name]'
			
			
			if (options.id) {
				this.loadAddress(options.id)
			}
		}
	}
</script>

<style lang="scss" scoped>

	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}

	.navigation {
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}

	.navigation-position {
		width: 100%;
		height: 100rpx;
		background: rgba(0, 0, 0, 0);
	}

	.back {
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:20rpx;
	}
	.navigation-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.content {
		width:100%;
		margin-top:40rpx;
		.form {
			.divider {
				padding: 10rpx;
				text-align: center;
				font-size: 24rpx;
				color: #E6A23C;
				background: #F5F5F5;
				margin-bottom: 15rpx;
			}

			.switch {
				text-align: right;
				margin-right:20rpx;
				margin-top:10rpx;
			}
		}

		.submit {
			width: 302rpx;
			height: 62rpx;
			line-height: 62rpx;
			background: #E97254;
			border: none;
			border-radius: 4rpx;
			font-size: 30rpx;
			color: #fff;
			margin-top:100rpx;
		}
	}

	.switch-btn {
		transform: scaleY(0.95);
		color:#E97254
	}

	.choiceCity {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		
		font-size: 24rpx;

	}

	.addressPicker {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.gray-color {
		color: #999999;
		font-weight: 300;
	}

	.black-color {
		color: #333333;
		font-weight: 400;
	}
	.form-border{
		border-top:2rpx solid #f2f2f2;
	}
	.form-label{
		padding-left:28rpx;
		/* padding-top:44rpx; */
	}
	.uni-forms-item__inner{
		padding-bottom: 10rpx !important;
	}
</style>
